<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="../../../node_modules/element-ui/lib/index.js"></script>
    <script src="../../../node_modules/echarts/dist/echarts.js"></script>


    <!-- 自定义 -->
    <script src="../../../node_modules/mockjs/dist/mock.js"></script>
    <script src="../static/js/mock_config.js"></script>
    <script src="../static/js/index.js"></script>
    <link rel="stylesheet" href="../../index.css">

    <!-- PC -->
    <link rel="stylesheet" href="../static/css/value.css" media="only screen and (max-height:1600px) ">
    <!-- 手机App
    <link rel="stylesheet" href="../static/css/valueApp.css" media="only screen and (min-height:1600px) "> -->
    <link rel="stylesheet" href="../static/css/valueApp.css" media="only screen and (min-height:1600px) ">
</head>

<body>
    <!--头部-->
    <!-- <div class="header">
        价值看板
    </div> -->
    <!--主体-->
    <div class="main clearfix" id="app">
        <div class="header">
            <header>
                <div class="navbar">
                    <div class="card_T">
                        <div class="card A" style="background-color:#0b87fa;color: white;">
                            <ul class="header-text">
                                <li>
                                    <h8 style="line-height: 78px;">车间承包看板</h8>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="pc_content">
                        <div class="card_header">
                            <div class="card C D" style="background-color: #33814e;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <h4>注塑件</h4>
                                    </li>
                                    <li class="list-group-item1">
                                        <h3 id="WaitPrtQty">{{defaultDt1.length}}款</h3>
                                    </li>
                                </ul>
                            </div>
                            <div class="card C" style="background: #33814e;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <h4>组装件</h4>
                                    </li>
                                    <li class="list-group-item1">
                                        <h3 id="Waitcompleted">{{defaultDt2.length}}款</h3>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card_header">
                            <div class="card C" style="background:#33814e;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <h4>小微</h4>
                                    </li>
                                    <li class="list-group-item1">
                                        <h3 id="MKTransac">{{total}}个</h3>
                                    </li>
                                </ul>
                            </div>
                            <div class="card C B" style="background: #33814e;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <h4>小微年收入</h4>
                                    </li>
                                    <li class="list-group-item1">
                                        <h3 id="cardAMT">{{AMT}}万元</h3>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        </div>


        <div class="main-left">
            <div class="Price Price-left">
                <div class="border-container">
                    <div class="name-title">
                        注塑基准价
                    </div>
                    <el-table :data="defaultDt1" :height=left_el_table_height stripe="true" :default-sort="{prop: 'Price', order: 'descending'}" ref="defaultDt1">
                        <el-table-column prop="GoodsName" align="center" label="注塑品">
                        </el-table-column>
                        <el-table-column prop="Price" align="center" label="基准价">
                            <template scope="scope">
                                <span v-if="scope.row.Price<=0" style="color:red">{{ scope.row.Price}}</span>
                                <span v-else style="color: rgba(0,220,255,.88)">{{ scope.row.Price }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
            </div>

        </div>
        <div class="center">
            <div class="MkCode border-container">
                <div class="name-title">
                    小微收入走势
                </div>
                <div>
                    <div id="echarts1" style="width: 100%; height: 300px;"></div>
                </div>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
            <div class="SID border-container">
                <div class="name-title">
                    小微余额
                </div>
                <div>
                    <div id="echarts2" style="width: 100%; height: 300px;"></div>
                </div>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
        </div>

        <div class="main-right">
            <div class="Price Price-right B">
                <div class="border-container">
                    <div class="name-title">
                        组装基准价
                    </div>
                    <el-table :data="defaultDt2" :height=left_el_table_height stripe="true" :default-sort="{prop: 'Price', order: 'descending'}" ref="defaultDt2">
                        <el-table-column prop="GoodsName" align="center" label="组装品">
                        </el-table-column>
                        <el-table-column prop="Price" align="center" label="基准价">
                            <template scope="scope">
                                <span v-if="scope.row.Price<=0" style="color:red">{{ scope.row.Price}}</span>
                                <span v-else style="color: rgba(0,220,255,.88)">{{ scope.row.Price }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
            </div>
        </div>
    </div>

</body>



<script>
    new Vue({
        el: '#app',
        data() {
            return {
                left_el_table_height: 770,
                el_table_height: 455,
                el_table_height_Mk: 255,
                defaultDt1: [],
                defaultDt2: [],
                echarts1: null,
                echarts2: null,
                total: 0,
                AMT: 0,
                option1: {
                    xAxis: {
                        type: 'category',
                        data: ['XW-0001', 'XW-00013', 'XW-00014', 'XW-0002', 'XW-0003', 'XW-0004', 'XW-0011', 'XW-0061', 'XWZ-0003'],
                        axisLabel: {
                            interval: 0,
                            rotate: 28,
                            textStyle: { //改变xy轴上文字的颜色
                                color: "#FFF"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: "#FFF"
                            }
                        }
                    },
                    series: [{
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        itemStyle: { //上方显示数值
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'white'
                                    }
                                }
                            }
                        }
                    }]
                },
                option2: {
                    tooltip: {
                        trigger: 'axis' //鼠标悬浮上去显示
                    },
                    xAxis: {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisLabel: {
                            textStyle: {
                                color: "#FFF"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} 万元',
                            textStyle: {
                                color: "#FFF"
                            }
                        }
                    },
                    series: [{
                        symbol: "circle",
                        data: [150, 230, 224, 218, 135, 147, 260, 300, 1000, 850, 200],
                        type: 'line',
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: '#f28e0c'
                            },

                        },
                        itemStyle: {
                            normal: {
                                color: '#f28e0c',
                                label: {
                                    formatter: function(params) {
                                        if (params.value > 0) {
                                            return params.value;
                                        } else {
                                            return '';
                                        }
                                    },
                                    show: true,
                                    color: "#FFF"
                                }
                            }
                        }
                    }]
                },
            }
        },
        methods: {
            GetTabelDate(that) {
                // 注塑基准价
                GetCodeData("VB21072215023753", "Get", "Goods").then(function(res) {
                        that.defaultDt1 = []
                        that.defaultDt2 = []
                        res.rows.forEach(element => {
                            // 注塑
                            if (element.GoodsSort == "D000108") {
                                that.defaultDt1.push(element)
                            }
                            // 组装
                            else if (element.GoodsSort == "D000110") {
                                that.defaultDt2.push(element)
                            }
                        });
                    }),
                    //小微提现走势
                    GetCodeData("VB21110211124448", "Get", "Goods").then(function(res) {
                        var 小微提现走势 = []
                        res.rows.forEach(element => {

                            Object.values(element).forEach(item => {
                                if (element.type == "小微提现走势") {
                                    if (typeof(item) == "number") {
                                        小微提现走势.push(item)
                                    }
                                }
                            });
                        });
                        that.option2.series[0].data = 小微提现走势
                        that.echarts1.setOption(that.option2);
                    }),
                    //小微余额
                    GetCodeData("VB21110211131479", "Get", "Goods").then(function(res) {
                        var 余额 = []
                        res.rows.forEach(element => {

                            Object.values(element).forEach(item => {
                                if (element.type == "余额") {
                                    if (typeof(item) == "number") {
                                        余额.push(item)
                                    }
                                }
                            });
                        });
                        that.option1.series[0].data = 余额
                        that.echarts2.setOption(that.option1);
                    }),
                    //小微总数
                    GetCodeData("VB21110314264934", "Get", "Goods").then(function(res) {
                        that.total = res.rows[0].total
                    }),
                    //小微总数
                    GetCodeData("VB21110314592033", "Get", "Goods").then(function(res) {
                        that.AMT = res.rows[0].AMT
                    })
            },
            formatterTime(row, column) {
                let data = row[column.property]
                return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data)
            }
        },

        mounted() {
            TableAotoRoll([this.$refs.defaultDt1, this.$refs.defaultDt2])
            var that = this
            setTimeout(function() {
                that.echarts1 = echarts.init(document.getElementById('echarts1')),
                    that.GetTabelDate(that);
                that.GetTabelDate(that)
                that.echarts2 = echarts.init(document.getElementById('echarts2')),
                    that.GetTabelDate(that);
                that.GetTabelDate(that)
            }, 0);
            setInterval(function() {
                that.GetTabelDate(that)
            }, 1000 * 60);
        }
    })
</script>



</html>